<template>
	<div class="galaryContent">
		<div class="wrapper">
			<div class="imgWrapper" v-for='item of imgList[this.index][this.index]' :key='item.id'>
				<img :src="item.imgUrl" @click="isShowGalary">
			</div>
		</div>
		<div class="galary" v-if='isShow'>
			<swiper :options="swiperOption" ref="mySwiperA">
				<swiper-slide v-for='item of imgList[this.index][this.index]' :key='item.id'>
					<div class="galary_desc">{{parseInt(item.id)+1}}/{{length}}</div>
					<div class="galary_img">
						<img :src="item.imgUrl">
					</div>
					<div class="cancelBtn" @click='closeImg'>X</div>
				</swiper-slide>
			</swiper>
		</div>
	</div>
</template>
<script>
import {mapState} from 'vuex'
 export default {
	 name: 'galaryContent',
	 computed:mapState(['index']),//映射index
	 data(){
		 return{
			 length:1,
			 isShow:false,
			 swiperOption:{
				  pagination:'.swiper-pagination',
			 },
			 imgList:[
				 {
					 0:[
						 {
							 id:'0',
							 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
						 },
						 {
							 id:'1',
							 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
						 },
						 {
							 id:'2',
							 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
						 }
					 ]
				 },
				 {
					 1:[
						 {
							 id:'0',
							 imgUrl:'https://pic5.40017.cn/01/000/c9/7f/rBLkBVlTdG-AQ_k9AAMSybZ_sdI293_340x256_00.jpg'
						 },
						 {
							 id:'1',
							 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
						 },
						 {
							 id:'2',
							 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
						 }
					 ]
				 },
				 {
						 2:[
							 {
								 id:'0',
								 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
							 },
							 {
								 id:'1',
								 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
							 },
							 {
								 id:'2',
								 imgUrl:'https://pic5.40017.cn/01/000/93/3a/rBANC1txAAmACb_fAAFscBWxB6I988_340x256_00.jpg'
							 }
						 ]
				 }
			 ]
		 }
	 },
	 methods:{
		 isShowGalary(){
			 this.length=this.imgList[this.index][this.index].length
			 this.isShow=!this.isShow
		 },
		 closeImg(){
			 this.isShow=!this.isShow
		 }
	 }
}
</script>
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
	background:#fff
	.imgWrapper
		width:47%
		background:#aaa
		margin:.12rem
		float:left
	.imgWrapper > img
		width:100%
.galary
	position:absolute
	top:-0.86rem
	left:0
	right:0
	bottom:0
	background:#000
	color:#fff
	.galary_desc
		width:100%
		text-align:center
		margin-top:2rem
	.galary_img
		margin-top:2rem
		width:100%
	.galary_img>img
		width:100%
	.swiper-pagination
		color:#fff
		bottom:7.5rem
	.cancelBtn
		font-size:.4rem
		text-align:center
		margin-top:2rem
</style>
